import { App, createApp } from 'vue';
import Antd from 'ant-design-vue';
import { PropEditorBase } from '@learnware/wcpe';
import AppVue from './App.vue';

interface IPiece {
  x: number; // 棋子在棋盘中的位置（格子的横向序号）
  y: number; // 棋子在棋盘中的位置（格子的纵向序号）
  c: number; // 棋子的颜色：0 为白色，1 为黑色
  fixed: boolean; // 棋子是否固定不可拖动
}

export default class PropEditor extends PropEditorBase {
  public el: HTMLElement;
  public value: IPiece[];
  public vueApp: App;
  constructor(
    el: HTMLElement,
    value: IPiece[],
    basicPropsValue:{ width: number, height: number, name: string },
    extendedPropsValue: { [key: string]: any }
  ) {
    super(el, value, basicPropsValue, extendedPropsValue);
    this.value = value;
    this.el = el;
    this.vueApp = createApp(AppVue, {
      preset: value,
      basicPropsValue,
      onValueUpdated: (v: IPiece[]) => { this.value = v; }
    });
    this.vueApp.use(Antd);
    this.vueApp.mount(el);
  }

  unmount(): void {
    if (this.vueApp) {
      this.vueApp.unmount();
    }
  }

  getValue() {
    return this.value;
  }
}